<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Card, Checkbox, Avatar, Rate, Tag, Empty } from 'ant-design-vue';
import { getMakeupArtistPage } from '#/api/wedding';
import type { MakeupArtist } from '#/api/wedding';

const props = defineProps<{
  selected: MakeupArtist[];
}>();

const emit = defineEmits(['update:selected']);

const loading = ref(false);
const artists = ref<MakeupArtist[]>([]);

const loadArtists = async () => {
  loading.value = true;
  try {
    const result = await getMakeupArtistPage({ pageNo: 1, pageSize: 100 });
    artists.value = result.list;
  } finally {
    loading.value = false;
  }
};

const toggleSelect = (artist: MakeupArtist) => {
  const index = props.selected.findIndex(a => a.id === artist.id);
  const newSelected = [...props.selected];
  if (index > -1) {
    newSelected.splice(index, 1);
  } else {
    newSelected.push(artist);
  }
  emit('update:selected', newSelected);
};

const isSelected = (artist: MakeupArtist) => {
  return props.selected.some(a => a.id === artist.id);
};

onMounted(() => {
  loadArtists();
});
</script>

<template>
  <div v-loading="loading">
    <div class="mb-4 text-gray-600">请选择化妆师（可多选）</div>
    
    <div v-if="artists.length > 0" class="grid grid-cols-3 gap-4">
      <Card 
        v-for="artist in artists" 
        :key="artist.id"
        :class="['cursor-pointer hover:shadow-lg transition-shadow', isSelected(artist) ? 'border-blue-500 border-2' : '']"
        @click="toggleSelect(artist)"
      >
        <div class="flex items-start">
          <Checkbox :checked="isSelected(artist)" class="mr-3 mt-1" />
          <Avatar :src="artist.avatar" :size="64" class="mr-3">
            {{ artist.artistName?.substring(0, 1) }}
          </Avatar>
          <div class="flex-1">
            <div class="font-medium text-base mb-1">{{ artist.artistName }}</div>
            <div class="flex items-center mb-1">
              <Rate :value="artist.rating" disabled :count="5" class="text-xs" />
              <span class="ml-1 text-xs text-gray-500">{{ artist.rating }}</span>
            </div>
            <Tag size="small">{{ artist.serviceLevel }}</Tag>
            <div class="text-red-500 font-semibold mt-2">¥{{ artist.servicePrice }}</div>
            <div class="text-xs text-gray-500 mt-1">从业{{ artist.workYears }}年</div>
          </div>
        </div>
      </Card>
    </div>
    
    <Empty v-else description="暂无可用化妆师" />
  </div>
</template>

